<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live</title>
    <link rel="stylesheet" href="css/theme.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/jquery.barrager.js"></script>
    <link rel="stylesheet" href="css/barrager.css">
    <link href="/css/video-js.min.css" rel="stylesheet">
    <script src="/js/video.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.1/sockjs.js"></script>
    <script src="js/global_notice.js"></script>

    <style>
        * {
            text-decoration: none;
            list-style: none;
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        header {
            background-image: url(img/default_banner.jpg);
            width: 100%;
            height: 250px;
            padding-top: 1px;
            object-fit: cover;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-bottom: 30px;
        }

        .video_form {
            background-color: darkgrey;
            width: 80%;
        }

        .top_site {
            height: 600px;
            display: flex;
        }

        .top_list {
            width: 20%;
            height: 100%;
            overflow: auto;
            padding-left: 20px;
        }

        .top_list li {
            border-radius: 5px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .top_item_topic {
            position: absolute;
            font-size: 14px;
            color: white;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .top_item_spectators {
            position: absolute;
            font-size: 14px;
            color: white;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            bottom: 10px;
        }

        .top_item_cover {
            position: relative;
        }

        .top_item_cover img {
            width: 100%;
        }

        .top_item_bottom {
            display: flex;
            margin-top: 10px;
        }

        .top_item_bottom img {
            height: 40px;
            height: 40px;
            border-radius: 20px;
        }

        .top_item_info {
            padding-left: 10px;
        }

        .top_item_descr {
            font-size: 14px;
        }

        .search_form {
            width: 500px;
            height: 32px;
            display: flex;
            margin: 60px auto auto auto;
        }

        .search_input {
            width: 452px;
            height: 100%;
            border: none;
            font-size: 14px;
            padding: 0 20px 0 20px;
        }

        .search_input:focus {
            outline: none;
            border-top: 1px solid var(--theme_color);
            border-left: 1px solid var(--theme_color);
            border-bottom: 1px solid var(--theme_color);
        }

        .search_btn {
            width: 48px;
            height: 100%;
            border: 1px solid var(--theme_color);
        }

        @media (max-width: 1500px) {
            .top_site {
                display: block;
                height: auto;
            }

            .video_form {
                width: 100%;
                height: auto;
                min-height: 300px;
            }

            .top_list {
                width: 100%;
                margin-top: 20px;
                margin-left: -10px;
                margin-right: -10px;
                padding-left: 0px;
                display: flex;
                flex-wrap: wrap;
            }

            .top_list li {
                width: 25%;
                padding: 0 10px;
            }
        }

        @media (max-width: 1000px) {
            header {
                background-size: auto 100%;
                background-position: center;
            }

            .top_list li {
                width: 200px;
            }
        }

        @media (max-width: 768px) {
            .search_form {
                width: fit-content;
                padding: 0;
            }

            .top_list li {
                width: 33.33%;
            }

            .top_list {
                margin-left: 0px;
                margin-right: 0px;
            }

            .search_input {
                width: 300px;
            }

            .top_item_topic,
            .top_item_spectators {
                font-size: 12px;
            }
        }

        @media (max-width: 500px) {
            .top_list li {
                width: 50%;
            }

            .top_site {
                padding: 0;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="search_form">
            <input type="text" id="search_input" placeholder="震惊：一男子在公共场合做这种事！" class="search_input">
            <button class="search_btn">搜索</button>
        </div>
    </header>
    <!-- 首页推荐 -->
    <section class="top_site theme_width">
        <div class="video_form">

        </div>
        <ul class="top_list">
            <li>
                <div class="top_item_cover">
                    <h2 class="top_item_topic">王者荣耀</h2>
                    <span class="top_item_spectators">13456人</span>
                    <img src="img/default_works.webp" alt="">
                </div>
                <div class="top_item_bottom">
                    <img src="img/default_avatar.webp" alt="">
                    <div class="top_item_info">
                        <p class="top_item_anchor">Excellent</p>
                        <p class="top_item_descr">国服诸葛亮在线口嗨</p>
                    </div>
                </div>
            </li>
        </ul>
    </section>
    <!-- 热门主播 -->
    <section class="hot_anchor theme_width">
        <h2>热门主播</h2>
    </section>
    <!-- 热门视频 -->
    <section class="hot_video theme_width">
        <h2>热门视频</h2>
    </section>
    <script>
        $(function () {
            var item = {
                img: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=932225914,4019385925&fm=26&gp=0.jpg', //图片
                info: '请填写弹幕文字', //文字
                href: '', //链接
                close: false, //显示关闭按钮
                speed: 10, //延迟,单位秒,默认6
                color: '#ffffff', //颜色,默认白色
                old_ie_color: '#ffffff', //ie低版兼容色,不能与网页背景相同,默认黑色
            }
        })
    </script>
</body>

</html>